ul.main-menu {
  width:960px;
  position:relative;
  background:#fff;
  height:180px;
  list-style-type:none;
  }

ul.main-menu li {
width:126px;
position:absolute;
height:50px;
  }


.main-menu a {
width: 126px; 
height: 50px; 
display: block;
}

#tab1 {
background:url('../images/menu.png') no-repeat 0px 0px;  
left:0px;
  }
#tab2 {
background:url('../images/menu.png') no-repeat -126px 0px;  
left:170px;
  }
#tab3 {
background:url('../images/menu.png') no-repeat -310px 0px;  
left:310px;
  }

#tab4 {
background:url('../images/menu.png') no-repeat -450px 0px;  
width:160px;
left:450px;
  }

/********hover**********/

#tab1 a:hover {
background:url('../images/menu.png') no-repeat 0px -180px;  

  }
#tab2 a:hover {
background: red url('../images/menu.png') no-repeat -120px -180px;  
width: 140px; 
  }
#tab3 a:hover {
background:url('../images/menu.png') no-repeat -310px -180px;  
width: 140px; 
  }

#tab4 a:hover {
background:url('../images/menu.png') no-repeat -450px -180px;  
  }

/********active**********/

#tab1 a:active {
background:url('../images/menu.png') no-repeat 0px -360px;  

  }
#tab2 a:active {
background: red url('../images/menu.png') no-repeat -170px -360px;  
width: 140px; 
  }
#tab3 a:active {
background:url('../images/menu.png') no-repeat -310px -360px;  
width: 140px; 
  }

#tab4 a:active {
background:url('../images/menu.png') no-repeat -450px -360px;  
  }

